<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:winter="http://www.winter.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorator="/layouts/layout">
<head>
	<title>Cambiar Contraseña</title>
	<script type="text/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		
		//you have to use keyup, because keydown will not catch the currently entered value
		$('input[type=password]').keyup(function() { 
			
			checkform($(this).val());
			
		}).blur(function() {
			$('#pswd_info').hide();
		});
		
	});
	</script>

</head>
<body>
	<section layout:fragment="content" class="content">
		<div class="error-message" th:text="${beans.systemInfo.errorMessage}" th:if="${beans.systemInfo.systemError}"></div>
		  <form id="MainForm" th:object="${authInfo}" class="login-form"  th:action="@{'/credenciales/cambiar'}" th:method="@{'POST'}">
		    <div class="header">
			   <h1>Cambiar Contraseña</h1>
			</div>
			<div class="content">
		       <ul>
			     <li>
			        <label for="InputPassword" th:text="@{'Contraseña Actual:'}">Contraseña</label>
                    <span><input name="InputPassword" placeholder="Contraseña Actual" type="password" class="input password" value="@{'Contraseña Actual:'}" onfocus="this.value=''" th:field="*{password}" required="required"/></span>
			     </li>
			     <li>
			        <label for="InputNewPassword" th:text="@{'Contraseña Nueva:'}">Contraseña</label>
                    <span><input name="InputNewPassword" placeholder="Contraseña Nueva" type="password" class="input password" value="@{'Contraseña Nueva:'}" onfocus="this.value=''" th:field="*{newPassword}" required="required"/></span>
			     </li>
			     <li>
			        <label for="InputConfirmarPassword" th:text="@{'Confirmar la contraseña nueva:'}">Contraseña</label>
                    <span><input name="InputConfirmarPassword" placeholder="Confirmar la contraseña nueva" type="password" class="input password" value="@{'Confirmar la contraseña nueva:'}" onfocus="this.value=''" th:field="*{confPassword}" required="required"/></span>
			     </li>
			     <li>
			   	    <input type="submit" name="submit" value="Cambiar" class="button"/><!--END LOGIN BUTTON-->
			     </li>
		       </ul>
			 </div>
			 <div id="pswd_info">		
				<h4>La contraseña debe cumplir con los siguientes requisitos:</h4>		
				<ul>		
					<li id="letter" class="invalid">Al menos <strong>una letra</strong></li>		
					<li id="capital" class="invalid">Al menos <strong>una letra mayúscula</strong></li>		
					<li id="number" class="invalid">Al menos <strong>un número</strong></li>		
					<li id="length" class="invalid">Tener por lo menos <strong>8 caracteres</strong></li>		
				</ul>		
			 </div>									
			</form>
	</section>
</body>
</html>